<template>
	<view class="floorgood">
			<block v-for="(item,index) in floorGoodsList">
			<view class="h2">{{item.name}}</view>
			<view class="floorgood-ul">
				<view class="floorgood-li"  v-for="(item,i) in item.goodsList" @click="shopdetails(item.id)" >
				<view class="floorgood-img">
					<image :src="item.picUrl"></image>
				</view>
				<view class="floorgood-font">
					<view class="floorgood-title">
						{{item.name}}
					</view>
					<view class="floorgood-price">
						{{item.retailPrice}}
					</view>
				</view>
				</view>
			</view>	
			</block>
	</view>
</template>
	
<script>
	export default {
		props:{
			floorGoodsList:{
				type:Array
			}
		},
		data() {
			return {
				
			}
		},
		methods:{
			shopdetails(e){
				uni.navigateTo({
				    url: '../../pages/shopdetails/shopdetails?id='+e
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	$marginBottom: 30rpx;
	$backColor: #f4f4f4;
	@import 'uview-ui/index.scss';
	
	.floorgood {
		margin-top: $marginBottom;
		// background-color: $uni-bg-color;
	
		.h2 {
			line-height: 40px;
			text-align: center;
			font-size: 40rpx;
			padding: $marginBottom;
		}
		.floorgood-ul{
			&::after,&::before{
				display: table;
				content: '';
				clear: both;
			}
			.floorgood-li{
				background-color: $uni-bg-color;
				width: 48%;
				float: left;
				margin-left: 1%;
				margin-bottom: 1%;
				.floorgood-img{
					image{
						width: 50vw;
						height: 30vh;
					}
				}
			.floorgood-font{
				text-align: center;
				text-overflow: ellipsis;
			.floorgood-title{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			}
			}
			
		}
		
		}
</style>
